<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta data-vue-meta="ssr" name="keywords" content="{{$contract['title']}}">
  <meta data-vue-meta="ssr" name="description" content="{{$contract['meta']}}">
  <title>{{$contract['title']}}-问合同</title>
  <!--<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>-->
  <script src="/home/js/vue.js"></script>
  <!-- <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.0/css/swiper.min.css" rel="stylesheet"> -->
  <link rel="stylesheet" href="/detail/css/swiper.css">
  <link rel="stylesheet" href="/detail/css/contractdetail.css">
  <link rel="stylesheet" href="/detail/css/search.css">
  <link rel="stylesheet" href="/detail/css/word.css">
  <link rel="stylesheet" href="/detail/css/wordloading.css">
  <link rel="stylesheet" href="/detail/css/footer.css">
  <link rel="stylesheet" href="/detail/css/navator.css">
  <link rel="stylesheet" href="/detail/css/login.css">
  <link rel="stylesheet" href="/home/css/openvip.css">
  <link rel="stylesheet" href="/detail/css/concoudialig.css">
  <link rel="stylesheet" href="/home/css/singdialog.css">
  <link rel="stylesheet" href="/detail/css/iconfont.css">
  <link rel="stylesheet" href="/detail/css/singledialog.css">

  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.2/js.cookie.min.js"></script> -->
  <script src="/detail/js/js-cookie.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.0/js/swiper.min.js"></script> -->
  <script src="/detail/js/swiper.js"></script>
  <!-- <script src="https://cdn.bootcss.com/moment.js/2.29.4/moment.min.js"></script> -->
  <script src="/detail/js/monment.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.1/vue-router.min.js"></script> -->
  <script src="/detail/js/vue-router.js"></script>
  <!-- 引入样式 -->
  <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
  <link rel="stylesheet" href="/home/css/el.css">
  <!-- 引入组件库 -->
  <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
  <script src="/home/js/el.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script> -->
  <script src="/detail/js/axios.js"></script>
  <script src="/detail/js/service.js"></script>
  <script>

  {{ str_replace('"', '`', $normal['code']) }}
  </script>
  <script>
  {{ str_replace('"', '`', $normal['service']) }}
  </script>

  <script>

  </script>
  <script src="/home/js/CryptoJS.js"></script>

</head>
<style>

</style>

<body>
  <div id="app">
    <!-- <span v-html="test"></span> -->
    <headrindex :test="test" @clicklogin="clicklogin"></headrindex>
    <!-- <hr> -->
    <!-- <home></home> -->
    <contractdetail @clicklogin="clicklogin"></contractdetail>

    <!-- <hr> -->
    <navator @clicklogin="clicklogin"></navator>
    <footerindex></footerindex>
    <login :isdialog="loginshow" @close="loginshow = false"></login>
    <coupondialog :isdialog="isCouponDialog"></coupondialog>
    <!--<singledialog :isdialog="true"  @close="isSingleShow = false"></singledialog>-->

    <!-- <openvip></openvip> -->
  </div>

  <!-- TODO 顶部组件 -->
  <template id="head">
    <div class="header" style="background: #fff;">
      <div class="hearder-top container">
        <!-- logo -->
        <div class="logo">
          <a href="/" @mouseleave="isHover = false">
            <img :src="nomal.image" alt="" @mouseover="isHover = true">
            <!-- <p>问合同</p> -->
            <!-- <img src="/home/static/logo.png" alt="" @mouseover="isHover = true"> -->
            <img style="position: relative;z-index: 999;" v-show="isHover" class="logoHover" src="/home/static/logo-hover.png" alt="">
          </a>
        </div>
        <!-- 中部全部分类 -->
        <!-- TODO -->
        <div class="topClassIfy_boix">
          <ul>
            <!-- @mouseout="isHoverShow = null" -->
            @foreach ($class_list as $k => $v)
            <li @mouseover="isHoverShow = {{$k}}" @mouseout="isHoverShow = null">
              <span> {{ $v['label'] }}</span>
              <i class="iconfont icon-xiajiantoucu"></i>
              <div class="hover_box" v-show="isHoverShow === {{$k}}">
                <!-- hover的透明盒子 -->
                <div class="hover_trans"></div>
                @foreach ($v['children'] as $k1 => $v1)
                <div class="list_view">
                  <span @click="classifyClick({{$k}},{{$k1}},{{$v1['id']}})"> {{ $v1['label']}}</span>
                  <ul>
                    @if (array_key_exists('children',$v1))
                    @foreach ($v1['children'] as $k2 => $v2)
                    <li @click="classifyClickSon({{$k}},{{$k1}},{{$v2['id']}},{{$k2}})">{{ $v2['label']}}
                    </li>
                    @endforeach
                    @else
                    @endif
                  </ul>
                </div>
                @endforeach
              </div>
            </li>
            @endforeach
          </ul>
        </div>
        <!-- 搜索框 -->
        <div class="search-small">
          <search :types="'small'"></search>
        </div>
        <!-- 登录 -->
        <div class="admin">
          <!-- 未登录 -->
          <div class="not-login" v-if="!userInfo" @click="clickLoginBox">
            <div class="login_box">
              <span>登录/注册</span>
            </div>
          </div>
          <!-- 已登录 -->
          <div class="yes-login" v-else @mouseover="mouseoverYesBox" @mouseout="mouseoutMsakBox">
            <div class="user-yes">
              <i class="iconfont icon-VIP" v-if="userInfo?.is_vip === 1 "></i>
              <div class=" pic" :class="userInfo?.is_vip === 1 ? 'active' : ''">
                <img src="/home/static/admin.png" alt="问合同">
              </div>
              <div class="info">
                <div class="tit">@{{ userInfo.nickname }}</div>
                <div class="login_type">@{{ userInfo.login_type === 2 ? '(手机号登录)' : (userInfo.login_type === 1 ?
                  '(微信登录)'
                  : '') }}</div>
              </div>
              <i class="iconfont icon-shangjiantou" ref="shangjiantou"></i>
            </div>
            <!-- 已登录盒子 -->
            <div class="yes_login_box" v-show="isAdminMaskShow">
              <!-- TODO 改版 -->
              <div class="admin_logo_info_box">
                <ul>
                  <!-- 不是vip -->
                  <li v-if="userInfo?.is_vip === 0">
                    <div @click="OpenVipHearder" class="open"><span>开通VIP</span>
                      <p>海量合同任意下载</p>
                    </div>
                  </li>
                  <!-- 是vip 且不是永久vip-->
                  <li v-else-if="userInfo?.is_vip === 1 && userInfo.final !== 1">
                    <i class="iconfont icon-renzhengyonghu"></i>
                    <span>剩余<em>@{{ downCount }}</em>下载特权</span>
                    <p class="date">@{{ moment(userInfo.vip_date ).format('YYYY.MM.DD') }}过期</p>
                    <p class="xufei" @click="OpenVipHearder">立即续费</p>
                  </li>
                  <!-- 是vip 且是永久 -->
                  <li v-else-if="userInfo.final === 1">
                    <i class="iconfont icon-renzhengyonghu"></i>
                    剩余<span><em>@{{ downCount }}</em></span>下载特权
                    <div style="text-align: center;margin-left:-15px"><span style="color:var(--primary)">( 永久有效 )</span>
                    </div>
                  </li>
                  <li @click="clickInfo">
                    <i class="iconfont icon-dingdan"></i>
                    <span>个人中心</span>
                  </li>
                  <li @click="clickOrder">
                    <i class="iconfont icon-dingdan"></i>
                    <span> 我的订单</span>
                  </li>
                  <li @click="clickDownHistroy">
                    <i class="iconfont icon-xiazaidaoru"></i>
                    <span>下载历史</span>
                  </li>
                  <li @click="clickCoupon">
                    <i class="iconfont icon-youhuiquan" style="font-size:13px"></i>
                    <span>优惠券</span>
                  </li>
                  <li @click="layout">
                    <i class="iconfont icon-tuichu"></i>
                    <span>退出登录</span>
                  </li>
                </ul>

              </div>
            </div>
            <!-- </Transition> -->

          </div>
        </div>
      </div>
      <!-- 开通vip -->
      <openvip v-if="isDialog" :isdialog="isDialog" @close="isDialog = $event"></openvip>

      <!-- 检查订单弹框 -->
      <el-dialog :visible="checkOrderDialog" width="30%" append-to-body center>
        <span style="font-size:16px;">您当前有未支付的订单，是否跳转到订单页去支付？</span>
        <span slot="footer" class="dialog-footer">
          <button class="closeOrder" @click="checkOrderDialog = false">取 消</button>
          <button class="gotoPay" @click="gotoOrder">确定</button>
        </span>
      </el-dialog>
    </div>
  </template>

  <!-- TODO 合同详情主体组件 -->
  <template id="contractdetail">
    <!-- 合同详情页面 -->
    <div class="contract-detail">
      <singledialog :isdialog="isSingleShow" :data="contractDetail" @close="isSingleShow = false"></singledialog>
      <div class="container containerMain">
        <div class="site">当前位置：
          @foreach($now_class as $k => $v)
          @if ($v['pid'] == 0)
          <a href="/page/classify/f/{{$v['key']}}?id={{$v['id']}}">{{$v['label']}}></a>
          @elseif($v['is_final'] == 1)
          <a href="/page/classify/s/{{$now_class[0]['key']}}?sidx={{$now_class[1]['key']}}&idx={{$v['key']}}&id={{$v['id']}}">{{$v['label']}}></a>
          @else
          <a href="/page/classify/s/{{$now_class[0]['key']}}?sidx={{$v['key']}}&id={{$v['id']}}">{{$v['label']}}></a>
          @endif
          @endforeach
          {{$contract['title']}}
        </div>
        <div class="main_body">
          <div class="main" v-loading="isMainLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
            <div class="contract_title">
              <!-- <i class="iconfont icon-Word"></i> -->
              <svg t="1683345339889" class="icon icon-Word" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8037" id="mx_n_1683345339891" width="35" height="35">
                <path d="M832.2 127.9v766H192.7v-766h639.5m0-64H192.7c-35.3 0-64 28.7-64 64v766c0 35.3 28.7 64 64 64h639.5c35.3 0 64-28.7 64-64v-766c0-35.4-28.7-64-64-64z" fill="#13227a" p-id="8038"></path>
                <path d="M261.433 416.203v-223.3h279.8v223.3zM605.378 224.047v-32h159.9v32zM605.394 318.831v-32h159.9v32zM605.397 416.028v-32h159.9v32zM261.437 510.503v-32h503.9v32zM261.44 605.397v-32h503.9v32z" fill="#13227a" p-id="8039"></path>
                <path d="M733.039 824.168v-32h97.9v32z" fill="#13227a" p-id="8040"></path>
                <path d="M892.5 958.3H231.1v-176c0-35.3 30.3-64 67.7-64h593.7c37.4 0 67.7 28.7 67.7 64v112c0 35.4-30.3 64-67.7 64z" fill="#13227a" p-id="8041"></path>
                <path d="M324.2 219.8l31.1 126.1h0.9L389 219.8h28l32.7 126.1h0.9l31.1-126.1h30.6l-47.8 165.8h-28.8l-32.3-124.7h-0.9L370 385.6h-29l-47.6-165.8h30.8zM309.2 770L336 878.6h0.8L365 770h24.2l28.2 108.6h0.8L445 770h26.4l-41.2 142.8h-24.8l-27.8-107.4h-0.8l-28 107.4h-25l-41-142.8h26.4zM601.4 788.4c12 13.4 18 31.2 18 53.2 0 22-6 39.6-18 53-12.6 14-29.8 21-51.6 21-22 0-39.2-7.2-51.6-21.2-12-13.6-17.8-31.2-17.8-52.8 0-21.8 5.8-39.4 17.8-53 12.4-14.4 29.6-21.4 51.6-21.4 21.8 0 39 7 51.6 21.2z m-86 14.4c-7.8 9.6-11.6 22.4-11.6 38.8 0 16.2 3.8 29 11.6 38.6 8 9.8 19.6 14.8 34.4 14.8 14.8 0 26.2-4.8 34.2-14.2 7.8-9.4 11.8-22.4 11.8-39.2 0-16.8-4-30-11.8-39.6-8-9.6-19.4-14.2-34.2-14.2-14.8 0-26.2 5-34.4 15zM705 770c14.6 0 26.2 3.2 34.6 9.8 8.8 7.2 13.4 17.6 13.4 31.2 0 7.4-2 14-6 19.8-4.4 6.4-10.6 10.6-18.2 12.6v0.4c12.4 2.8 19.4 11 21 25l2.4 23c0.8 8.8 3.8 15.8 8.6 21h-25.4c-3.4-4.4-5.4-10.6-6.2-18.6l-1.8-17.6c-0.8-7.8-3.2-13.4-7.2-16.8-4.2-3.6-10.4-5.2-18.4-5.2h-37v58.2h-23.4V770H705z m-40.2 64.6h37c9.2 0 16.2-2 21-5.8 4.4-4 6.6-9.6 6.6-16.8 0-7.8-2.2-13.4-6.6-16.8-4.4-3.6-11.4-5.2-21-5.2h-37v44.6zM833 770c23.2 0 40.6 6.4 52.6 19.2 11.4 12 17.2 29.4 17.2 52.2 0 22.6-5.8 40-17.2 52.2-12 12.8-29.4 19.2-52.6 19.2h-52.2V770H833z m-28.8 122.8h24.4c17.8 0 30.8-4.2 39-12.4 8-8.4 12-21.4 12-39 0-18-4-31.2-12-39.2-8.2-8.2-21.2-12.2-39-12.2h-24.4v102.8z" fill="#13227a" p-id="8042"></path>
              </svg>

              <span>@{{ contractDetail.title }}</span>
            </div>
            <!-- 预览图 -->
            <!--<div class="preview" v-for="(item,index) in contractPreview" :key="index">-->
            <!--  <img :src="item" alt="加载失败">-->
            <!--</div>-->
            <div class="preview" v-for="(item,index) in contractPreview" :key="index" :style="contractPreview.length <= 1 ? `background: url(${item}) no-repeat;background-color: #f2f2f2;background-size: 674px;background-position: 50%;` : ''">
              <img v-if="contractPreview.length > 1" :src="item" alt="加载失败">
            </div>
            <!-- 是vip查看全部 -->
            <template v-if="userInfo?.is_vip === 1">
              <!-- 遮罩层 -->
              <div class="word_mask" v-if="isMore && contractDetail.png_count-contractDetail.png.length !== 0">
                试读结束，剩余@{{ contractDetail.png && contractDetail.png_count-contractDetail.png.length }}页未读，<span @click="openVip">请下载或者开通VIP后查阅</span>
              </div>
              <!-- 加载更多遮罩层 -->
              <div class="word_mask" v-else-if=" !isMore && contractDetail.png_count-contractDetail.png.length === 0">
                <span @click="clickMore">点击加载更多<i class="iconfont icon-xiangxiajiantou"></i><em>剩余@{{ contractDetail.png
                    && contractDetail.png_count-contractPreview.length }}页未读</em></span>
              </div>
            </template>
            <!-- 不是vip -->
            <template v-else>
              <!-- 遮罩层 -->
              <div class="word_mask" :style="contractDetail.png_count <= 1 ? 'height: 748px;padding-top: 428px;' : ''" v-if="isMore">
                试读结束，剩余@{{ contractDetail.png && contractDetail.png_count > 1 ? contractDetail.png_count-contractDetail.png?.length : contractDetail.png_count }}页未读，<span @click="openVip">请下载或者开通VIP后查阅</span>
              </div>
              <!-- 加载更多遮罩层 -->
              <div class="word_mask" :style="contractDetail.png_count <= 1 ? 'height: 748px;padding-top: 428px;' : ''" v-else>
                <span @click="clickMore">点击加载更多<i class="iconfont icon-xiangxiajiantou"></i><em>剩余@{{ contractDetail.png
                    && contractDetail.png_count-contractPreview.length }}页未读</em></span>
              </div>
            </template>
          </div>
          <div class="footer">
            <!-- 版权 -->
            <div class="copyright">
              {{ str_replace('{title}', $contract['title'], $normal['state']) }}
            </div>
            <!-- 相关搜索 -->
            <div class="search_info">
              <div class="title_left">相关搜索</div>
              <div class="info">
                <ul>
                  <li v-for="(item,index) in  searchInfoList" :key="index" @click="searchClick(item.id)">@{{ item.title
                    }}</li>
                </ul>
              </div>
            </div>
            <!-- 工具 -->
            <div class="utils">
              <!-- 翻页 -->
              <!-- <div class="page">
              <div class="prev" @click="prevWord"><i class="iconfont icon-shangjiantou1"></i>上一篇</div>
              <div class="next" @click="nextWord"><i class="iconfont icon-xiajiantou"></i>下一篇</div>
            </div> -->
              <div class="left">
                <i class="iconfont icon-wendangwenjian"></i>
                <div class="info">
                  <p>@{{ contractDetail.title }}</p>
                  <em>@{{ contractDetail.png_count }}页</em>
                </div>
              </div>
              <div class="middle">
                <button @click="btnCollect"><i style="color:red" :class=" isCollect ? 'iconfont icon-shoucang2' : 'iconfont icon-shoucang1' "></i> @{{ isCollect ? '已收藏' : '收藏' }}</button>

              </div>
              <div class="right">
                <!-- <button @click="CustomizeClick"><i class="iconfont icon-bianji"></i>定制合同</button> -->

                <!--<button @click="btnCollect"><i style="color:red" :class=" isCollect ? 'iconfont icon-shoucang2' : 'iconfont icon-shoucang1' "></i> <span>@{{ isCollect ? '已收藏' : '收藏' }}</span></button>-->

                <button v-if="contractDetail.one_pay === 1 && contractDetail.show_one === 1 && userInfo?.is_vip !== 1" @click="isSingleShow = true"><i class="iconfont icon-xiazai"></i>单篇购买</button>

                <button @click="download"><i class="iconfont icon-xiazai"></i>立即下载</button>
              </div>
            </div>
          </div>
        </div>
        <div class="right-side">
          <div class="side_content">

            <!-- <div class="pic" @click="picClick">
            <img src="~@/assets/yearVip.png" alt="">
          </div> -->
            <div class="word_info">
              <div class="top">
                <button @click="picClick">会员免费下载</button>
                <button v-if="contractDetail.one_pay === 1 && contractDetail.show_one === 1 && userInfo?.is_vip !== 1" @click="isSingleShow = true" class="single">以 @{{ typeInfo.price / 100 }} 元购买此模板</button>
              </div>
              <div class="bottom">
                <div class="left">
                  <p>
                    页数：{{ $contract['png_count'] }}
                  </p>
                  <p>类型：word</p>
                </div>
                <div class="right">
                  <p>
                    编号：{{ $contract['id'] }}
                  </p>
                  <!-- <p>类型：word</p> -->
                </div>

              </div>
            </div>
            <!-- 专题信息 -->
            <div class="special_info" v-if="specialDetail.length" @click="specialClick">
              <div class="pic">
                <img :src="specialDetail[0].image" alt="">
              </div>
              <div class="bottom">
                <div class="title">
                  @{{ specialDetail[0].title }}
                </div>
                <i><span>合同数量</span>@{{ specialDetail[0].download }}</i>
                <i><span>下载数量</span>@{{ specialDetail[0].number }}</i>
              </div>
            </div>
            <!-- 相关文档 -->
            <div class="correlation_word">
              <div class="title">相关文档</div>
              <ul>
                @foreach($about as $k => $v)
                <li @click="openDetail({{$v['id']}},{{'"'.$v['title'].'"'}})">
                  <div class="word_item">
                    <img src="{{$v['title_pic']}}" alt="{{$v['title']}}" title="{{$v['title']}}">
                  </div>
                  <p>{{ $v['title'] }}</p>
                </li>
                @endforeach
              </ul>
            </div>
          </div>
          <div class="left-side" v-loading="isTopLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
            <div class="title-top">
              TOP下载榜
            </div>
            <!-- top下载 -->
            <ul>
              <li v-for="item in recommendList" :key="item.id" @click="openDetail(item.id,item.title)">
                <i class="iconfont icon-Word"></i>
                @{{ item.title }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="container love_container" :style="specialDetail.length ? 'padding-top: 570px;' : '' ">
        <div class="love">猜你想找</div>
        <div class="word-main" style="justify-content: space-between;
    padding-right: 54px;">
          <worditem v-for="(item,index) in guessList" :key="index" :item="item" @clickCustomize="isCustomizeShow = $event"></worditem>
        </div>
      </div>
      <!-- 定制合同弹框 -->
      <!-- <Customize :isDialog="isCustomizeShow" @close="isCustomizeShow = $event"/> -->
      <!-- 登录的弹框 -->
      <!-- 检查订单弹框 -->
      <el-dialog :visible.sync="checkOrderDialog" width="30%" :close-on-click-modal="false" center>
        <span style="font-size:16px;">您当前有未支付的订单，是否跳转到订单页去支付？</span>
        <span slot="footer" class="dialog-footer">
          <button class="closeOrder" @click="checkOrderDialog = false">取 消</button>
          <button class="gotoPay" @click="gotoOrder">确定</button>
        </span>
      </el-dialog>
      <!-- <LoginDialog :isDialog="isDialog" @close="isDialog = $event"/> -->
      <!-- 开通vip -->
      <openvip v-if="isOpenVip" :isdialog="isOpenVip" @close="openVipClose" />
      <!--单篇组件-->
      <!--<singledialog :isdialog="isSingleShow" :data="contractDetail" @close="isSingleShow = false"></singledialog>-->
    </div>
  </template>

  <!-- TODO 搜索组件 -->
  <template id="search">
    <!-- 搜索框 -->
    <div class="search" :id="types">
      <input ref="iptSearch" class="search-ipt" type="text" placeholder="搜索精品模板" @focus="isFocus=true" @blur="blurIpt" v-model="searchValue" @keyup.enter="searchEnter">
      <div class="search-btn" @click="searchClick">
        <!-- <i class="iconfont icon-sousuo"></i> -->
        <span>搜索</span>
      </div>
      <!-- 热词框 -->
      <Transition name="slide-fade">
        <div class="hot" v-if="isFocus && searchValue">
          <ul v-if="hotWord.length > 0">
            <li v-for="(item,i) in hotWord" :key="i" @click="clickHotSearch(item)">
              <i>@{{ i+1 }}</i>
              @{{item.title}}
              <em v-if="item.isHot">HOT</em>
            </li>
          </ul>
          <ul v-else>
            <img src="/home/static/search_emty.png" alt="">
          </ul>
        </div>
      </Transition>
    </div>
  </template>

  <!-- TODO 飘窗组件 -->
  <template id="navator">
    <!-- 电梯导航 -->
    <div>
      <div class="ele-navator">
        <div class="vip active" title="VIP权益" @click="openDialog">
          <!-- <img class="iconVip" src="~@/assets/vip.png" alt=""> -->
          <i class="iconfont icon-renzhengyonghu"></i>
          VIP
          <!-- <div> 限时优惠</div> -->
        </div>
        <div class="lookhear" title="我看过的" @click="lookhearHandel">
          <i class="iconfont icon-lishi"></i>
          <!-- 我看过的 -->
        </div>
        <div title="游客订单" @click="toVisitOrder">
          <i class="iconfont icon-youke"></i>
          <span style="    display: inline-block;
    width: 25px;">游客订单</span>
        </div>

        <div class="special" @click="specialClickFiexd">
          <i class="iconfont icon-zhuanti"></i>
          行业<br />专题
        </div>
        <div class="service" title="联系客服" @click="contact">
          <i class="iconfont icon-kefu"></i>
          <!-- 联系客服 -->
        </div>
        <!-- <div class="coole"  title="收藏本站" @mouseover="isCooleBoxShow = true" @mouseleave="isCooleBoxShow = false">
    <i class="iconfont icon-shoucang"></i>
    收藏本站
    </div> -->
        <div class="top" title="置顶" @click="topClick">
          <i class="iconfont icon-zhiding"></i>
          <!-- 置顶 -->
        </div>
      </div>
      <!-- hover盒子 -->
      <div class="coole-box" v-show="isCooleBoxShow" @mouseover="isCooleBoxShow = true" @mouseleave="isCooleBoxShow = false">
        <h4>快速收藏本站</h4>
        <span class="ctrl">Ctrl</span>
        <i>+</i>
        <span class="D">D</span>
      </div>
      <div class="service-box" v-show="isServiceBoxShow">
        <div class="pic">
          <img src="~@/assets/service.jpg" alt="">
        </div>
        <div class="text">微信扫码联系客服</div>
      </div>
      <!-- 我看过的 -->
      <div class="history_look" v-if="isHistoryShow">
        <div class="look_heard">
          <span @click="btnClose"><i class="iconfont icon-guanbi"></i></span>
          <i>我看过的</i>
        </div>
        <div class="title">
          格式/名称
        </div>
        <!-- 主体列表 -->
        <div class="main_list">
          <ul v-if="historyList.length">
            <li v-for="item in historyList" :key="item.id" @click="btnOpen(item.id,item.title)">
              <i class="iconfont icon-Word"></i>
              <span>@{{item.title}}</span>
            </li>
          </ul>
          <!-- 没有数据 -->
          <div class="empty" v-else>
            <img src="~@/assets/icon_order_empty.png" alt="">
            没有浏览记录
          </div>
        </div>
      </div>
      <!-- 登录的弹框 -->
      <!-- <LoginDialog :isDialog="$store.state.user.isDialogLogin" @close="$store.commit('user/setLoginShow',$event)"/> -->
      <!-- 开通vip -->
      <openvip v-if="openVipDialog" :isdialog="openVipDialog" @close="openVipDialog = $event"></openvip>
      <!-- 检查订单弹框 -->
      <el-dialog :visible.sync="checkOrderDialog" width="30%" :close-on-click-modal="false" center>
        <span style="font-size:16px;">您当前有未支付的订单，是否跳转到订单页去支付？</span>
        <span slot="footer" class="dialog-footer">
          <button class="closeOrder" @click="checkOrderDialog = false">取 消</button>
          <button class="gotoPay" @click="gotoOrder">确定</button>
        </span>
      </el-dialog>
    </div>
  </template>

  <!-- TODO 底部组件 -->
  <template id="footerindex">
    <div class="footer-index">
      <div class="top_des">
        <ul>
          <li>
            <i class="iconfont icon-a-ziyuan651"></i>
            <span>精选模板</span>
          </li>
          <li>
            <i class="iconfont icon-hailiangxiansuo"></i>
            <span>海量内容</span>
          </li>
          <li>
            <i class="iconfont icon-a-download"></i>
            <span>下载即用</span>
          </li>
          <li>
            <i class="iconfont icon-fuwu"></i>
            <span>服务周全</span>
          </li>
        </ul>
      </div>
      <div class="container">
        <div class="logo">
          <!-- <img src="/home/static/logo.png" alt=""> -->
          <img :src="nomal.image" alt="">
          <p>周一至周五 9:00 - 18:00</p>
          <button @click="btnClickServe">联系在线客服</button>
        </div>
        <div class="Copyright">
          <div class="intro">
            <span @click="clickToThree">网站声明 <i style="margin-left:8px">|</i></span>
            <span @click="clickToFour">侵权处理 <i style="margin-left:8px">|</i></span>
            <span @click="clickToFive">关于我们</span>
          </div>
          <!-- <div class="info">
          <p>Copyright © @{{ new Date().getFullYear() }} 问合同 - All rights reserved</p>
          <a href="https://beian.miit.gov.cn/#/Integrated/index">豫ICP备20024385号</a>
        </div> -->
          <div class="desc">
            问合同（www.wenhetong.com）是一家专注于提供合同范本，合同模板，合同样本下载的网站。
          </div>
          <p>
            <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">浙ICP备2023008636号</a>
          </p>
          <div class="info">
            <p>Copyright ©@{{ new Date().getFullYear() }} 版权所有 智取(浙江)信息科技有限公司</p>
          </div>
        </div>
        <!-- <div class="qrcode">
        <img src="~@/assets/wxQrcoe.jpg" alt="">
        <div class="text">关注官方微信公众号</div>
      </div> -->
      </div>
    </div>
  </template>

  <!-- TODO 登录组件 -->
  <template id="login">
    <div class="dialog-mask" v-if="isdialog">
      <div class="login-dialog">
        <i class="iconfont icon-guanbi" @click="close"></i>
        <!-- 左侧 -->
        <!-- <div class="left-img">
        </div> -->
        <!-- 右侧 -->
        <div class="right">
          <div class="title">
            <!-- <img src="~@/assets/ico.png" alt=""> -->
            <img src="/home/static/D-logo.png" alt="">
            <span class="text">问合同</span>
            <p>海量合同模板下载</p>
          </div>
          <!-- tab页 -->
          <div class="tabs">
            <div class="item_tab" :class="!isLoginPhone ? 'active' : ''" @click="isLoginPhone = false" @mouseleave="weiMouseLeave">微信登录</div>
            <div class="item_tab" :class="isLoginPhone ? 'active' : ''" @click="isLoginPhone = true" @mouseleave="weiMouseLeave">手机号登录</div>
          </div>
          <!-- 微信登录 -->
          <div class="type-weiixn" v-if="!isLoginPhone">
            <!-- <div class="type">
             <i class="iconfont icon-weixin"></i>
            微信扫码登录
          </div> -->
            <!--二维码 -->
            <div class="qrcode">
              <!-- <p>扫码关注 [问合同]</p> -->
              <img :src="wxQrcode.qr_code_url" alt="">
              <!-- 二维码过期遮罩层 -->
              <div class="mask" v-show="isQrcodeMask">
                <button @click="clickRefresh">二维码已过期点击刷新</button>
              </div>
              <div class="mask" v-if="isScan">
                <button @click="refresh">扫码成功</button>
              </div>
            </div>
          </div>
          <!-- 手机号登录 -->
          <div class="type-phone" v-else>
            <!-- 表单 -->
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="ruleForm">
              <el-form-item prop="phone" style="width:335px">
                <el-input placeholder="请输入手机号" type="text" v-model.number="ruleForm.phone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item prop="code" class="codeClass">
                <el-input placeholder="请输入验证码" style="width:208px;" v-model.number="ruleForm.code"></el-input>
                <el-button :disabled="isDisabled" @click="getCode">@{{codeMsg}}</el-button>
              </el-form-item>
              <el-form-item>
                <el-button class="login" type="primary" :loading="loginLoading" @click="submitForm('ruleForm')">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="intro">登录即代表已阅读并同意<span @click="clickFuwu">《服务协议》</span>与<span @click="clickYinsi">《隐私政策》</span></div>

        </div>
      </div>
    </div>
  </template>

  <!-- TODO word组件 -->
  <template id="worditem">
    <!-- 每一项word -->
    <!-- TODO -->
    <li class="recommend-item" @click="clickWordItem($event,item.id,item.title)">
      <!-- <a ref="item_a" href="" target="_blank"></a> -->
      <div class="pic">
        <img :src="item.title_pic" alt="图片加载失败">
      </div>
      <!-- 工具 -->
      <div class="utils">
        <!-- <div class="customization" @click="customize">
          <i class="iconfont icon-bianji"></i>
          定制合同
        </div> -->
        <div class="customization" @click="clickCollect(item.id)">
          <i v-if="!isCoolect" class="iconfont icon-shoucang1"></i>
          <i v-else style="color:red" class="iconfont icon-shoucang2"></i>
          收藏
        </div>
        <div class="download"><i class="iconfont icon-xiazai"></i> 立即下载</div>
      </div>
      <!--TODO 说明 -->
      <div class="explain">
        @{{ item.title }}
      </div>
    </li>
  </template>

  <!-- TODO wordloading 组件 -->
  <template id="wordloading">
    <li class="recommend-item2">
      <div class="pic">
        <i class="iconfont icon-tupian"></i>
      </div>
    </li>
  </template>

  <!-- TODO 开通vip组件 -->
  <template id="openvip">
    <div class="dialog-mask" v-if="isdialog">
      <div class="openVip_dialog">
        <i class="iconfont icon-guanbi" @click="close"></i>
        <!-- 顶部 -->
        <div class="heard">
          <div class="pic">
            <img src="/home/static/pay_banner.jpg" alt="">
          </div>
        </div>
        <div class="main_dialog">
          <!-- 左侧 -->
          <!-- <div class="left">
        </div> -->
          <!-- 右侧 -->
          <div class="right">
            <p>请选择<span>VIP</span>特权会员服务</p>
            <div class="top">
              <div class="item_wiper" :class="active === index ? 'active' : ''" @click="active = index" v-for="(item,index) in mealList" :key="item.id">
                <p>@{{ item.tag }}</p>
                <i v-show="active === index" class="iconfont icon-guifanjieguoyeduigou"></i>
                <div class="price">
                  <strong>￥<i>@{{item.show_price / 100 | moenyFormat}}</i></strong>
                  <em class="label">/@{{ item.label }}</em>
                  <div>￥<em><i class="hua">@{{ item.discount / 100 | moenyFormat }}</i> @{{ item.label }}</em></div>
                </div>
              </div>
            </div>
            <!-- 切换优惠券的盒子 -->
            <div class="box">
              <p>@{{ mealList[active].describe }}</p>
              <div class="money_info">
                应付金额：
                <span v-if="discountInfo.title !== '不使用优惠券'">@{{ (mealList[active].price - discountInfo.price) / 100 | moenyFormat }}</span>
                <span v-else>@{{ (mealList[active].price) / 100 | moenyFormat }}</span>
                元
              </div>
              <div class="pay_type_button">
                <div>
                  <div class="weixin" @click="payClick('weixin')">
                    <i class="iconfont icon-weixin"></i>
                  </div>
                  <p @click="payClick('weixin')">微信扫码支付 <i class="iconfont icon-youjiantou"></i></p>
                </div>
                <div>
                  <div class="zfb" @click="payClick('zfb')">
                    <i class="iconfont icon-zhifubaozhifu"></i>
                  </div>
                  <p @click="payClick('zfb')">支付宝支付 <i class="iconfont icon-youjiantou"></i></p>
                </div>
              </div>
              <div class="list">
                <!-- <ul>
                <li><i>·</i> 开通会员说明：</li>
                <li><i>·</i> 本站会员账号权限为虚拟数字资源，开通后不可退款</li>
                <li><i>·</i> 开通会员后可享有对应会员特权的商品折扣，免费权限</li>
                <li><i>·</i> 会员特权到期后不享受特权</li>
                <li><i>·</i> 重复购买特权到期时间累计增加</li>
              </ul> -->
                <!-- 微信or支付宝 -->
                <!-- <div class="wxpay_alipay">
                <el-radio v-model="radio"  label="weixin"> <i class="iconfont icon-weixin1"></i>微信支付</el-radio>
                <el-radio v-model="radio" label="zfb"><i class="iconfont icon-zhifubaozhifu"></i>支付宝支付</el-radio>
              </div> -->
              </div>

            </div>
            <!-- 底部 -->
            <div class="footer">
              <div class="pay_info">
                <div class="discount">
                  <!-- <img src="~@/assets/coupon-bg3cd1ff59f.png" alt=""> -->
                  <!-- 选择优惠券 -->
                  <div class="select">
                    <div class="select-count" @click="isSelectShow = !isSelectShow">
                      <span>@{{ discountInfo.title }}</span>
                      <i class="iconfont icon-xiangxiajiantou"></i>
                      <!-- 优惠券盒子列表 -->
                      <div class="list" v-show="isSelectShow" @mouseleave="mouseout">
                        <ul>
                          <li v-for="(item,index) in unusedList" :key="index" @click="selestItemClick(item,index)" :class="mealList[active].price >= item.fill_price || index === 0 ? '' : 'disable' " :disabled="mealList[active].price >= item?.fill_price || index === 0  ? false : true">
                            @{{ item.title }}
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="time" v-show="unusedList.length > 1">
                      <!-- 几时几分几秒失效 -->
                    </div>
                  </div>
                </div>
                <div class="discount_info">
                  <el-popover placement="right" width="300" trigger="hover" content="每获取1篇资料会消耗1个下载特权，1年会员套餐每日赠送10个下载特权，当日使用完毕后次日系统将自动补充，请放心购买">
                    <em slot="reference">
                      <em>购买须知</em>
                      <i class="iconfont icon-jinggao"></i>
                    </em>
                  </el-popover>
                  <p class="intro" @click="introClick">支付即表示你已同意《服务协议》</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

  <!-- TODO 优惠券组件 -->
  <template id="coupondialog">
    <!-- 领取优惠券的弹框 -->
    <div class="dialog-mask" v-if="isdialog">
      <div class="coupon_dialog">
        <i class="iconfont icon-guanbi1" @click="close"></i>
        <div class="main_dialog">
          <div class="pic" @click="send">
            <!-- <img src="~@/assets/couponDialog.png" alt=""> -->
            <img :src="image" alt="">
          </div>
        </div>
      </div>
    </div>
  </template>

  <!--TODO 单篇购买组件-->
  <template id="singledialog">
    <div class="single_download_dialog">
      <div class="dialog-mask" v-if="isdialog">
        <div class="single_dialog">
          <i class="iconfont icon-guanbi1" @click="close"></i>
          <div class="main_dialog">
            <div class="download_pop_content">
              <div class="title">单篇文档购买</div>
              <div class="con_info">
                <div class="title">
                  <svg t="1684997023790" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3121" width="15" height="15">
                    <path d="M535.119473 0h69.599248v95.247413C729.226717 96.331138 853.614299 93.92286 977.881468 96.331138a40.459078 40.459078 0 0 1 44.914393 45.516463c2.047037 234.566322 0 469.614299 1.204139 703.819379-1.204139 24.082785 2.287865 50.694262-11.318909 72.248354-16.978363 12.041392-38.893697 10.837253-58.761994 12.041392h-349.200376V1023.518344h-72.248354C354.980245 990.886171 177.490122 960.541863 0 928.752587V95.488241C178.33302 63.578551 356.786453 32.511759 535.119473 0z" fill="#2A5699" p-id="3122"></path>
                    <path d="M604.718721 131.010348H988.598307v761.979304H604.718721v-95.247413h302.479774v-48.165569H604.718721v-59.002822h302.479774v-48.16557H604.718721v-59.002822h302.479774v-48.165569H604.718721v-60.206961h302.479774V428.673565H604.718721v-60.206961h302.479774v-46.96143H604.718721v-59.604892h302.479774V214.336783H604.718721zM240.827846 341.373471c22.156162-1.324553 44.19191-2.287865 66.348071-3.492003 15.533396 80.4365 31.30762 160.632173 48.165569 240.827845 13.125118-82.724365 27.695202-165.087488 41.783632-247.571025 23.239887-0.842897 46.479774-2.167451 69.719661-3.612418-26.370649 115.356538-49.369708 231.796802-78.148636 346.430856-19.386642 10.355597-48.165569 0-71.52587 1.204139C301.034807 596.169332 283.093133 517.779868 269.245532 438.667921c-13.606773 76.944497-31.30762 153.16651-46.841016 229.508937-22.39699-1.204139-44.793979-2.528692-67.311383-4.094073-19.266228-104.760113-42.024459-208.918156-60.206962-313.919097 19.868297-0.963311 39.857008-1.806209 60.206962-2.528693 12.041392 75.860771 25.648166 151.360301 36.124177 227.341487 16.135466-77.907808 32.873001-155.695202 49.610536-233.603011z" fill="#FFFFFF" p-id="3123"></path>
                  </svg>
                  <span> @{{ data?.title }}</span>
                </div>
                <div class="pay_info">立即支付：<span>@{{ typeInfo.price/100 }}</span>元，即可下载</div>
                <div class="timer">
                  <span>剩余支付时间： </span>
                  <i>
                    <em>00</em> : <em>@{{ second }}</em> : <em>@{{ millisecond }}</em>
                  </i>

                </div>
              </div>
              <div class="pay_btn">
                <button @click="weixinPay"> <i class="iconfont icon-weixin"></i>微信</button>
                <button @click="zfbPay"><i class="iconfont icon-zhifubaozhifu"></i>支付宝</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>


  <script>
    var router = new VueRouter({
      routes: [
        // { path: '/foo', component: home },
        // { path: '/bar', component: Bar }
      ],
      mode: 'history'
    })
    console.log(router);


    // 生成时间戳
    let timestamp = Math.floor(Date.now() / 1000)
    const token = '98uu8ru8w0d9kc82ijr8uu8djek9id92'
    let stringToSign = timestamp + '' + timestamp

    // 使用密钥或令牌对请求参数和时间戳进行签名
    let signature = CryptoJS.HmacSHA512(stringToSign, token).toString()

    const render = () => {
      const timer = setTimeout(() => {
        timestamp = Math.floor(Date.now() / 1000)
        stringToSign = timestamp + '' + timestamp
        signature = CryptoJS.HmacSHA512(stringToSign, token).toString()
        // console.log('reder')
        render()
        clearTimeout(timer)
      }, 14000)
    }
    render()

    /**
     * 顶部header组件
     */
    Vue.component('headrindex', {
      template: '#head',
      data() {
        return {
          isClassifyBoxShow: false,
          isHover: false,
          contractList: [],
          isSearchShow: false,
          userInfo: null,
          isAdminMaskShow: false,
          isDialog: false,
          checkOrderDialog: false,
          moment,
          // downCount: 0,
          isHoverShow: null,
          //
          // test: '000'
        }
      },
      props: ['test'],
      computed: {
        // userInfo () {
        //   if (Cookies.get('userinfo')) {
        //     return JSON.parse(Cookies.get('userinfo'))
        //   } else {
        //     return null
        //   }
        // },
        downCount() {
          return Cookies.get('downloadNum') ? Cookies.get('downloadNum') : ''
        },
        nomal() {
          return Cookies.get('nomal') ? JSON.parse(Cookies.get('nomal')) : ''
        }
        // ...mapGetters(['userInfo']),
        // ...mapGetters(['contractList'])
      },
      created() {
        setTimeout(() => {
          // console.log(app);
          console.log(this.test);

        })
      },
      mounted() {
        setTimeout(() => {
          this.userInfo = Cookies.get('userinfo') ? JSON.parse(Cookies.get('userinfo')) : null
        }, 500)
      },
      methods: {
        clickOrder() {
          window.location.href = '/page/ucenter'
        },
        clickInfo() {
          window.location.href = '/page/ucenter?type=myInfo'
        },
        clickDownHistroy() {
          window.location.href = '/page/ucenter?type=myBuy'
        },
        clickCoupon() {
          window.location.href = '/page/ucenter?type=myCoupon'
        },
        // ...mapActions(['contract/getContractList']),
        // ...mapActions(['user/Layout']),
        clickLoginBox() {
          // console.log('ok');
          this.$emit('clicklogin', true)
        },
        // 获取分类合同列表
        async getContractList() {
          const {
            data
          } = await contract()
          this.contractList = data
          // console.log(data)
        },
        classifyClick(index, sidx, id) {
          window.open(`/page/classify/s/${index}?sidx=${sidx}&id=${id}`)
        },
        classifyClickSon(index, sidx, id, idx) {
          window.open(`/page/classify/s/${index}?sidx=${sidx}&id=${id}&idx=${idx}`)
        },
        mouseoverYesBox() {
          this.isAdminMaskShow = true
          this.$refs.shangjiantou.style.transform = 'rotate(0) translateY(10px)'
        },
        mouseoutMsakBox() {
          this.isAdminMaskShow = false
          this.$refs.shangjiantou.style.transform = 'rotate(180deg) translateY(12px)'
        },
        async layout() {
          this.$confirm('是否退出登录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            customClass: 'oe-dialog-btn'
          }).then(async () => {
            // await this['user/Layout']()
            Cookies.remove('TOKEN')
            Cookies.remove('userinfo')
            await service({
              method: 'GET',
              url: '/member/logout',
              params: {
                token: Cookies.get('TOKEN')
              }
            })
            // this.$store.commit('user/removeBdid')
            this.$message({
              type: 'success',
              message: '退出成功!'
            })
            location.reload()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消退出登录'
            })
          })
        },
        mouse() {
          console.log(1)
        },
        // 开通vip
        OpenVipHearder() {
          // this.isDialog = true
          service({
              method: 'GET',
              url: '/member/check_order'
            })
            .then((res) => {
              console.log(res)
              if (res.count >= 1) {
                console.log('order');
                // 有订单 打开弹框
                this.checkOrderDialog = true
              } else {
                console.log('ppp');

                if (this.userInfo.is_vip === 1) {
                  // 提示用户已经是vip 建议去升级会员
                  this.$confirm(`您已经是Vip了，到期时间为<strong style="color:red">${this.userInfo.vip_date}</strong>,是否去升级会员`, {
                    confirmButtonText: '确定',
                    cancelButtonText: '继续续费',
                    dangerouslyUseHTMLString: true,
                    closeOnClickModal: false,
                    showClose: false
                  }).then(() => {
                    window.location.href = '/page/ucenter?type=myInfo'
                  }).catch(() => {
                    this.isDialog = true
                  })
                } else {
                  this.isDialog = true
                }

                //this.isDialog = true
              }
            })
            .catch(() => {
              // this.$message.error('接口出错')
            })
        }, // 点击确定跳转到订单页
        gotoOrder() {
          this.checkOrderDialog = false
          window.location.href = `/page/ucenter`
        }
        // 获取可用下载次数
        // async getDayNum () {
        //   if (this.userInfo) {
        //     const res = await getDayNum()
        //     // console.log(res)
        //     this.downCount = res.count
        //   }
        // }
      },
      // watch: {
      //   $route: {
      //     handler (route) {
      //       console.log(route.path)
      //       if (route.name === 'classify' || route.name === 'ContractDetail') {
      //         this.isSearchShow = true
      //       } else {
      //         this.isSearchShow = false
      //       }
      //     },
      //     immediate: true
      //   }
      // },
    })

    /**
     * 合同详情
     */
    Vue.component('contractdetail', {
      template: '#contractdetail',
      data() {
        return {
          isCollect: false,
          isSingleShow: false,
          recommendList: [

          ],
          limit: 8,
          cid: '', // 合同的id
          contractDetail: {

          },
          specialDetail: [],

          // 当前合同详情
          isMainLoading: false, // 主体区域的loading
          isTopLoading: false,
          isCustomizeShow: false,
          cpOffsetHeight: 0,
          isMore: false,
          about: {
            limit: 50,
            rand: 6
          },
          aboutList: [],
          isDialog: false, // 登录弹框状态
          isOpenVip: false,
          guessList: [],
          isDownload: false,
          path: '',
          checkOrderDialog: false,
          searchInfoList: [],
          typeInfo: {}
        }
      },
      async created() {
        await this.getContractDetail()
        this.getSinglePrice()
        this.$nextTick(() => {
          // document.title = this.contractDetail?.title + ' - 问合同'
        })

        await this.getRecommend()
        // await this.getAboutContractList()
        await this.getGusList()
        // this.getAboutContract()
      },
      methods: {
        // 获取单篇套餐列表
        async getSinglePrice() {
          const {
            data
          } = await service({
            method: 'GET',
            url: '/order_type/list',
            params: {
              type: 4
            },
            headers: {
              signature,
              timestamp
            }
          })
          this.typeInfo = data[0]
        },
        // ...mapMutations(['user/setHistory']),
        btnCollect() {
          console.log(Cookies.get('userinfo'))
          const con_id = location.href.split('contractdetail/')[1].replace('.html', '')

          if (!Cookies.get('userinfo')) {
            return this.$message.info('请先登录')
          }
          this.isCollect = !this.isCollect
          if (this.isCollect) {
            // 因为先取反了
            service({
              method: 'GET',
              url: '/member/collect',
              params: {
                contract_id: con_id
              }
            })
          } else {
            service({
              method: 'GET',
              url: '/member/un_collect',
              params: {
                contract_id: con_id
              }
            })
          }
        },
        async getAboutContract() {
          const {
            data
          } = await service({
            method: 'GET',
            url: '/detail/about',
            params: {
              limit: 50,
              rand: 10,
              keyword: this.contractDetail.title
              // keyword: {!! $contract['title'] !!}
            },
            headers: {
              signature,
              timestamp
            }
          })
          // console.log(data)
          this.searchInfoList = data
        },
        /**
         * 点击专题
         */
        specialClick() {
          window.open('/page/special-detail?id=' + this.specialDetail[0].id)
        },
        // 获取下载top榜单
        async getRecommend() {
          this.isTopLoading = true
          try {
            const {
              data
            } = await service({
              method: 'GET',
              url: '/main/get_suggest',
              params: {
                limit: this.limit
              }
            })
            this.recommendList = data
          } catch (err) {
            return false
          } finally {
            this.isTopLoading = false
          }
          // console.log(data)
        },
        // 获取合同详情
        async getContractDetail() {
          // <!--this.isMainLoading = true-->
          const con_id = location.href.split('contractdetail/')[1].replace('.html', '')
          try {
            const {
              data
            } = await service({
              method: 'GET',
              url: '/detail/get_png',
              params: {
                contract_id: con_id
              }
            })
            //  console.log(data)
            this.contractDetail = data
            this.isCollect = data.is_collect

            const res = await service({
              url: '/detail/get_special',
              params: {
                contract_id: this.cid
              }

            })
            this.specialDetail = res.data
            //this.getAboutContract()

            if (data.png.length <= 2) {
              this.isMore = true
            }

          } catch (err) {
            return false
          } finally {
            this.isMainLoading = false
          }
        },
        // 上一篇文档
        prevWord() {
          if (!this.contractDetail.prev?.id) {
            this.$message({
              message: '已经没有上一页了',
              type: 'warning'
            })
          } else {
            // window.open(`/contractdetail?cid=${this.contractDetail.prev.id}`)
            window.open(`/page/detail/${this.contractDetail.prev.id}.html`)
          }
        },
        // 下一篇文档
        nextWord() {
          if (!this.contractDetail.next?.id) {
            this.$message({
              message: '已经没有下一页了',
              type: 'warning'
            })
          } else {
            // window.open(`/contractdetail?cid=${this.contractDetail.next.id}`)
            window.open(`/page/detail/${this.contractDetail.next.id}.html`)
          }
        },
        // 点击加载更多
        clickMore() {
          // this.contractPreview = this.contractDetail.png?.map(item => item)
          this.$nextTick(() => {
            document.querySelector('.right-side').style.position = 'fixed'
            document.querySelector('.right-side').style.bottom = '106px'
            document.querySelector('.right-side').style.left = '61%'


          })

          this.isMore = true
        },
        // 获取相关合同
        async getAboutContractList() {
          const res = await service({
            method: 'GET',
            url: '/detail/about',
            params: {
              ...this.about,
              keyword: this.contractDetail?.title
            },
            headers: {
              signature,
              timestamp
            }
          })
          if (res.code !== 200) return
          this.aboutList = res.data
          // console.log(res)
        },
        // 打开详情
        openDetail(id, title) {
          // this['user/setHistory']({ id: id, title: title })
          const historyList = Cookies.get('historyList') ? JSON.parse(Cookies.get('historyList')) : []
          // 存取合同历史
          const index = historyList.findIndex(item => item.id === id)
          if (index !== -1) {
            historyList.splice(index, 1)
          }
          historyList.unshift({
            id: id,
            title: title
          })
          Cookies.set('historyList', JSON.stringify(historyList))
          // window.open(`/contractdetail?cid=${id}`)
          window.open(`/contractdetail/${id}.html`)
        },
        // 下载文档
        async download() {
          const con_id = location.href.split('contractdetail/')[1].replace('.html', '')
          // console.log(this.$store.getters.userInfo)
          if (!this.userInfo) {
            // 没有登录 打开登录弹框
            this.isDialog = true
            // this.$store.commit('user/setLoginShow', true)
            this.$emit('clicklogin')
          } else if (this.userInfo?.is_vip === 0) {
            // TAG 已登录 判断是不是vip 如果不是打开 vip弹框
            service({
                method: 'GET',
                url: '/member/check_order'
              })
              .then((res) => {
                // console.log(res)
                if (res.count >= 1) {
                  this.checkOrderDialog = true
                } else {
                  this.isOpenVip = true
                }
              })
              .catch(() => {
                // this.$message.error('接口出错')
              })
            //this.isOpenVip = true
          } else {
            // TAG 已登录 是vip 查看当前用户可用下载次数 有可用在下载
            const res = await service({
              method: 'GET',
              url: '/member/get_day_num'
            })
            if (res.count >= 1) {
              // TODO 有可用次数 此时做下载操作
              if (!this.isDownload) {
                this.isDownload = true
                const res = await service({
                  method: 'GET',
                  url: '/member/get_down_path',
                  params: {
                    contract_id: con_id
                  }
                })
                this.path = res.path.replace('http://', 'https://')
                // this.$router.push({
                //   name: 'download',
                //   query: {
                //     keyword: this.contractDetail?.title,
                //     cid: this.$route.params.id.replace('.html', ''),
                //     path: this.path
                //   }
                // })
                window.location.href = `/page/download/?keyword=${this.contractDetail.title}&cid=${con_id}&path=${this.path}`
              }
            } else {
              // 没次数了
              this.$notify.error('您好，您当前当天的下载次数已用完')
            }
            // console.log(res)
          }
        },
        // 获取您可能还喜欢
        async getGusList() {
          const res = await service({
            method: 'GET',
            url: '/detail/guess',
            params: {
              history: [...this.history],
              limit: 10
            },
            headers: {
              signature,
              timestamp
            }
          })
          // if (res.code !== 200) return this.$message.error('接口出错')
          // this.guessList = res.data
          this.guessList = res.data.filter((o, i) => i < 10)

          // console.log(res)
        },
        CustomizeClick() {
          // TODO 校验订单 有订单去支付..
          checkOrder()
            .then((res) => {
              // console.log(res)
              if (res.count >= 1) {
                this.checkOrderDialog = true
                this.$alert('您当前还有未支付的订单，是否立即去支付').then(() => {
                  this.gotoOrder()
                })
              } else {
                this.isCustomizeShow = true
              }
            })
        },
        // 点击确定跳转到订单页
        gotoOrder() {
          this.checkOrderDialog = false
          window.location.href = '/page/ucenter'
        },
        // 点击下载或者开通vip查略
        openVip() {
          if (!this.userInfo) {
            // 打开登录
            this.$emit('clicklogin')

          } else if (this.userInfo?.is_vip === 0) {
            // 打开开通vip
            this.isOpenVip = true
          }
        },
        // 点击图片
        picClick() {
          this.download()
        },
        searchClick(id) {
          window.open(`/contractdetail/${id}.html`)
        },
        openVipClose() {
          this.isOpenVip = false
          if (this.contractDetail.one_pay === 1) {
            this.isSingleShow = true
          }
        },
      },
      watch: {
        isMore: {
          handler(bool) {
            this.$nextTick(() => {
              try {
                const cp = document.querySelector('.main_body')
                const of = parseInt(cp.offsetHeight - 850)
                this.cpOffsetHeight = of
              } catch (e) {
                console.log(e);
              }
            })
          },
          immediate: true
        }
      },
      computed: {
        historyList() {
          return Cookies.get('historyList') ? JSON.parse(Cookies.get('historyList')) : []
        },
        nomal() {
          return Cookies.get('nomal') ? JSON.parse(Cookies.get('nomal')) : ''
        },
        userInfo() {
          return Cookies.get('userinfo') ? JSON.parse(Cookies.get('userinfo')) : null
        },

        contractPreview: {
          get() {
            if (!this.isMore) {
              return this.contractDetail.png?.filter((item, index) => index <= 1 ? item : false)
            } else {
              return this.contractDetail.png?.map(item => item)
            }
          }
        },
        history() {
          const newHistory = []
          this.historyList.forEach((item, index) => {
            if (index <= 2) {
              newHistory.push(item)
            }
          })
          return newHistory
        }
      },
      mounted() {
        // this.cid = {!!$contract['id'] !!}
        this.cid = <?php echo json_encode($contract['id']); ?>;
        // this.contractDetail = {!!$data!!}
        this.contractDetail = <?php echo ($data); ?>;
        this.isDownload = false
        this.getAboutContract()
        this.$nextTick(() => {
          document.querySelector('.right-side').classList.add('posion_side')
        })
        setTimeout(() => {
          this.$nextTick(() => {
            const cp = document.querySelector('.main_body')
            const of = parseInt(cp.offsetHeight - 850)
            this.cpOffsetHeight = of
            window.addEventListener('scroll', () => {
              if (parseInt(window.pageYOffset) - this.cpOffsetHeight > 0) {
                document.querySelector('.utils').style.position = 'relative'
                document.querySelector('.right-side').style.position = 'absolute'
                document.querySelector('.right-side').style.bottom = '10px'
                document.querySelector('.right-side').classList.remove('posion_side')
                document.querySelector('.right-side').style.left = '65.3%'
              } else {
                document.querySelector('.utils').style.position = 'fixed'
                document.querySelector('.right-side').style.position = 'fixed'
                document.querySelector('.right-side').style.left = '61%'
                document.querySelector('.right-side').classList.add('posion_side')
              }
            })
          })
        }, 800)
      }
    })

    /**
     * 搜索组件
     */
    Vue.component('search', {
      template: '#search',
      data() {
        return {
          isFocus: false,
          hotWord: [],
          searchValue: '',
          page: 1,
          timer: null
        }
      },
      created() {
        this.getSearchHot()
      },
      props: {
        types: {
          type: String,
          default: null
        }

      },
      methods: {
        async search(page = this.page) {
          // TODO 在这里 调用接口拿到新数据 $emit 一个事件发送给父组件 重新渲染新的word文档列表
          const res = await searchIndex({
            page: page,
            limit: 20,
            keyword: this.$route.query.keyword,
            order: this.$route.query.orderBy ?? 'nomal'
          })
          if (res.code !== 200) return
          this.$emit('searchList', res)
        },
        // 点击回车
        searchEnter(val) {
          this.searchClick()
          this.$refs.iptSearch.blur()
        },
        // 失去焦点
        blurIpt() {
          setTimeout(() => {
            this.isFocus = false
          }, 200)
        },
        // 点击搜索按钮
        searchClick() {
          if (this.searchValue.trim() === '') return
          window.location.href = '/page/search?keyword=' + this.searchValue
        },
        clickHotSearch(item) {
          window.location.href = '/page/search?keyword=' + item.title

        },
        // 获取搜索提示词
        async getSearchHot() {
          // await this['user/getSearchHot']()
          // const res = await searchHint()
          // if (res.code !== 200) return this.$message.error('接口错误')
          // console.log(res)
          // this.hotWord = this.$store.state.user.searchHot
        }
      },
      watch: {
        // $route: {
        //   handler (route) {
        //     // console.log(route)
        //     if (route.query.keyword && route.query.keyword.trim() !== '') {
        //       this.searchValue = route.query.keyword
        //       // 调用搜索组件搜索方法
        //       this.$nextTick(() => {
        //         this.search()
        //       })
        //     }
        //   },
        //   immediate: true
        // },
        searchValue: {
          handler(val) {
            if (val) {
              if (this.timer) clearTimeout(this.timer)
              this.timer = setTimeout(async () => {
                // 获取联想词
                const res = await service({
                  methods: 'GET',
                  url: '/search/index',
                  params: {
                    page: 1,
                    limit: 20,
                    keyword: val,
                    order: this.$route.query.orderBy ?? 'download'
                  },
                  headers: {
                    signature,
                    timestamp
                  }
                })
                this.hotWord = res.data
              }, 200)
            } else {
              this.hotWord = this.$store.state.user.searchHot
            }
          }
        }
      }
    })

    /**
     * word组件
     */
    Vue.component('worditem', {
      template: '#worditem',

      data() {
        return {
          currentIndex: null,
          loading: true,
          checkOrderDialog: false,
          isCoolect: false
        }
      },
      props: {
        // index: {
        //   type: Number,
        //   required: true
        // },
        item: {
          type: [Object, Array, Number],
          required: true
        }
      },
      methods: {
        // ...mapMutations(['user/setHistory']),
        clickCollect(id) {

          if (!Cookies.get('userinfo')) {
            return this.$message.info('请先登录')
          }
          this.isCoolect = !this.isCoolect
          if (this.isCoolect) {
            // 因为先取反了
            service({
              method: 'GET',
              url: '/member/collect',
              params: {
                contract_id: id
              }
            })
          } else {
            service({
              method: 'GET',
              url: '/member/un_collect',
              params: {
                contract_id: id
              }
            })
          }
        },
        // 定制合同
        customize() {
          // console.log(0)
          // TODO 校验订单 有订单去支付..
          checkOrder()
            .then((res) => {
              // console.log(res)
              if (res.count >= 1) {
                this.checkOrderDialog = true
                this.$alert('您当前还有未支付的订单，是否立即去支付').then(() => {
                  this.gotoOrder()
                })
              } else {
                this.$emit('clickCustomize', true)
              }
            })
        },
        // 点击确定跳转到订单页
        gotoOrder() {
          this.checkOrderDialog = false
          this.$router.push({
            path: 'ucenter'
          }, () => {}, () => {})
        },
        // 点击进入详情
        clickWordItem(e, id, title) {
          // console.log(e.target.className)
          if (e.target.className === 'customization') return
          // console.log('ok')
          // this['user/setHistory']({ id: id, title: title })
          const historyList = Cookies.get('historyList') ? JSON.parse(Cookies.get('historyList')) : []
          // 存取合同历史
          const index = historyList.findIndex(item => item.id === id)
          if (index !== -1) {
            historyList.splice(index, 1)
          }
          historyList.unshift({
            id: id,
            title: title
          })
          Cookies.set('historyList', JSON.stringify(historyList))
          // window.open('/contractdetail?cid=' + id)
          window.open('/contractdetail/' + id + '.html')
        }
      },
    })

    /**
     * wordloading 组件
     */
    Vue.component('wordloading', {
      template: '#wordloading',
    })

    /**
     * 飘窗组件
     */
    Vue.component('navator', {
      template: '#navator',
      data() {
        return {
          isCooleBoxShow: false,
          isServiceBoxShow: false,
          isHistoryShow: false,
          // isDialog: false,
          openVipDialog: false,
          checkOrderDialog: false
        }
      },
      computed: {
        // ...mapGetters(['historyList', 'userInfo'])
        userInfo() {
          return Cookies.get('userinfo') ? JSON.parse(Cookies.get('userinfo')) : null
        },
        historyList() {
          return Cookies.get('historyList') ? JSON.parse(Cookies.get('historyList')) : null
        }
      },
      methods: {
        // ...mapMutations(['user/setHistory']),
        // 置顶
        topClick() {
          window.scrollTo({
            top: 0,
            behavior: 'smooth'
          })
        },
        // 点击专题
        specialClickFiexd() {
          location.href = '/page/special'
        },
        toVisitOrder() {
          //   this.$router.push({
          //     name: 'visitorder'
          //   })
          location.href = '/page/visitorder'
        },
        // 点击我看过的
        lookhearHandel() {
          if (!this.userInfo) {
            // 没登录先登录
            // this.isDialog = true
            // this.$store.commit('user/setLoginShow', true)
            this.$emit('clicklogin')
          } else {
            // 已登录
            this.isHistoryShow = true
          }
        },
        // 关闭历史记录
        btnClose() {
          if (this.isHistoryShow) {
            // 关闭
            this.$nextTick(() => {
              // 定义动画
              //   document.styleSheets[0].insertRule(
              //     `@keyframes historyclose {
              // 0%{
              //   transform: translateX(0px);
              //   opacity: 1;
              // }
              // 100%{
              //   transform: translateX(380px);
              //   opacity: 0;
              // }`,
              //     0
              //   )
              document.querySelector('.history_look').style.animation = 'historyclose .4s  forwards'
            })
            setTimeout(() => {
              this.isHistoryShow = false
            }, 600)
          }
        },
        // 打开历史合同详情
        btnOpen(id, title) {
          // window.open('/page/detail/' + id + '.html')
          // this['user/setHistory']({ id: id, title: title })
          const historyList = Cookies.get('historyList') ? JSON.parse(Cookies.get('historyList')) : []
          // 存取合同历史
          const index = historyList.findIndex(item => item.id === id)
          if (index !== -1) {
            historyList.splice(index, 1)
          }
          historyList.unshift({
            id: id,
            title: title
          })
          Cookies.set('historyList', JSON.stringify(historyList))
          // window.open(`/contractdetail?cid=${id}`)
          window.open(`/contractdetail/${id}.html`)
        },
        openDialog() {
          if (!this.userInfo) {
            console.log('click');
            // this.isDialog = true
            // this.$store.commit('user/setLoginShow', true)
            this.$emit('clicklogin')
          } else {
            if (this.userInfo.final === 1) {
              // 终身会员不需要打开vip弹框
              return this.$alert('您已经是终身vip了')
            }
            service({
                method: 'GET',
                url: '/member/check_order'
              })
              .then((res) => {
                // console.log(res)
                if (res.count >= 1) {
                  this.checkOrderDialog = true
                } else {
                  if (this.userInfo.is_vip === 1) {
                    // 提示用户已经是vip 建议去升级会员
                    this.$confirm(`您已经是Vip了，到期时间为<strong style="color:red">${this.userInfo.vip_date}</strong>,是否去升级会员`, {
                      confirmButtonText: '确定',
                      cancelButtonText: '继续续费',
                      dangerouslyUseHTMLString: true,
                      closeOnClickModal: false,
                      showClose: false
                    }).then(() => {
                      window.location.href = '/page/ucenter?type=myInfo'
                    }).catch(() => {
                      this.openVipDialog = true
                    })
                  } else {
                    this.openVipDialog = true
                  }
                  //  this.openVipDialog = true
                }
              })
            // .catch(() => {
            //   this.$message.error('接口出错')
            // })
          }
        },
        // 点击确定跳转到订单页
        gotoOrder() {
          this.checkOrderDialog = false
          window.location.href = `/page/ucenter`
        },
        // 点击联系客服
        contact() {
          // window.open(this.$store.getters.nomal.url)
          window.open(JSON.parse(Cookies.get('nomal')).url)

        }
      },
    })

    /**
     * 底部组件
     */
    Vue.component('footerindex', {
      template: '#footerindex',
      computed: {
        nomal() {
          return Cookies.get('nomal') ? JSON.parse(Cookies.get('nomal')) : ''
        }
      },
      methods: {
        btnClickServe() {
          window.open(JSON.parse(Cookies.get('nomal')).url)
        },
        clickToFive() {
          window.open('/page/helpCenter?type=5')
        },
        clickToFour() {
          window.open('/page/helpCenter?type=4')
        },
        clickToThree() {
          window.open('/page/helpCenter?type=3')
        }
      }
    })

    /**
     * 登录组件
     */
    Vue.component('login', {
      template: '#login',
      props: {
        isdialog: {
          type: Boolean,
          default: false
        }
      },
      async created() {
        // if (!this.$store.getters.userInfo) {
        //   if (!this.wxQrcode.url) {
        //     await this.getWxQrcode()
        //   }
        // }
        console.log(this.isdialog);

      },
      mounted() {
        // alert(0)
        // if (!this.$store.getters.userInfo) {
        //   if (!this.wxQrcode.url) {
        //     // alert(0)
        //     // this.getWxQrcode()
        //   }
        // }
      },
      data() {
        const validatePhone = (rule, value, callback) => {
          if (!value) {
            this.isDisabled = true
            return callback(new Error('手机号不能为空'))
          }
          setTimeout(() => {
            if (!Number.isInteger(value)) {
              callback(new Error('请输入数字值'))
              this.isDisabled = true
            } else {
              const res = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
              if (!res.test(value)) {
                callback(new Error('手机号码格式不正确'))
                this.isDisabled = true
              } else {
                callback()
                this.isDisabled = false
              }
            }
          }, 0)
        }
        const validateCode = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入验证码'))
          } else {
            if (!Number.isInteger(value)) {
              callback(new Error('请输入数字值'))
            }
            // if (this.ruleForm.checkPass !== '') {
            //   this.$refs.ruleForm.validateField('checkPass')
            // }
            callback()
          }
        }

        return {
          isLoginPhone: true,
          loginLoading: false, // 登录loading
          isDisabled: true, // 是否禁用
          ruleForm: {
            phone: '',
            code: ''
          },
          rules: {
            phone: [{
              validator: validatePhone,
              trigger: 'change'
            }],
            code: [{
              validator: validateCode,
              trigger: 'blur'
            }]
          },
          codeMsg: '获取验证码',
          codeTiemr: 60,
          timer: null,
          wxQrcode: {},
          wxQrcodeTimer: 60,
          isQrcodeMask: false,
          wxMsakTime: null,
          checkTimer: null,
          isScan: false,
          isWxCheckLoading: false,
          // isDialog: false
          // url: process.env.VUE_APP_BASE_API
        }
      },
      methods: {
        // ...mapMutations(['user/setToken']),
        // ...mapActions(['user/getUserInfo']),

        async submitForm(formName) {
          this.loginLoading = true
          try {
            await this.$refs[formName].validate()
            // TODO 登录成功
            const data = await service({
              method: 'POST',
              url: '/member/login',
              data: {
                mobile: this.ruleForm.phone,
                code: this.ruleForm.code,
                // bd_vid: this.$store.state.user.bvId ?? '',
                // keyword: this.$store.state.user.keyword ?? ''
                keyword: Cookies.get('keyword') || '',
                bd_vid: Cookies.get('bdVid') || '',
                // TODO 登录传参
                keywordid: Cookies.get('a_keywordid') ?? '',
                unitid: Cookies.get('a_unitid') ?? '',
                userid: Cookies.get('a_user') ?? '',
                planid: Cookies.get('a_planid') ?? ''
              }
            })
            // console.log(data)
            if (data.code === 200) {
              // 存到vueX和本地中
              // this['user/setToken'](data.token)
              Cookies.set('TOKEN', data.token, {
                expires: 1
              })
              // this.$store.commit('user/removeBdid')
              this.loginLoading = false
              this.$message({
                message: '恭喜你，登录成功',
                type: 'success'
              })
              // 同时获取用户信息
              // this['user/getUserInfo']()
              service({
                method: 'GET',
                url: '/member/me'
              }).then(res => {
                if (res.code === 200) {
                  Cookies.set('userinfo', JSON.stringify(res.data), {
                    expires: 1
                  })
                  location.reload()
                }
              })
              // 关闭弹框
              this.close()
            } else if (data.code === 1002) {
              this.$message.warning('验证码错误')
              this.loginLoading = false
            }
          } catch (err) {
            this.loginLoading = false
            return false
          }
        },
        // 关闭弹框
        close() {
          console.log('ok');
          this.$nextTick(() => {
            // 定义动画
            document.querySelector('.login-dialog').style.animation = 'dialogclose .3s  forwards'
            setTimeout(() => {
              this.$emit('close', false)
              // this.isDialog = false
            }, 300)
          })
        },
        // 获取验证码
        async getCode() {
          try {
            const data = await service({
              method: 'POST',
              url: '/member/send_sms',
              data: {
                mobile: this.ruleForm.phone
              }
            })
            // console.log(data)
            if (data.code === 200) {
              this.$notify({
                title: '成功',
                message: '获取验证码成功',
                type: 'success'
              })
              this.isDisabled = true
              this.timer = setInterval(() => {
                this.codeTiemr--
                this.codeMsg = this.codeTiemr + '后重新获取'
              }, 1000)
            } else {
              this.$notify({
                title: '失败',
                message: '获取验证码失败',
                type: 'error'
              })
            }
          } catch (err) {
            console.log(err)
          }
        },
        // 获取微信登录二维码
        async getWxQrcode() {
          const res = await service({
            method: 'GET',
            url: '/member/get_qr_code'
          })
          // console.log(res)
          if (res.code === '200') {
            this.wxQrcode = res.data
          }
        },
        // 检查二维码状态
        async getWxCheck() {
          this.isWxCheckLoading = true
          const check = await service({
            method: 'POST',
            url: '/member/check_login',
            data: {
              qrCodeId: this.wxQrcode.uuid,
              // bd_vid: this.$store.state.user.bvId ?? '',
              // keyword: this.$store.state.user.keyword ?? ''
              keyword: Cookies.get('keyword') || '',
              bd_vid: Cookies.get('bdVid') || '',
              // TODO 登录传参
              keywordid: Cookies.get('a_keywordid') ?? '',
              unitid: Cookies.get('a_unitid') ?? '',
              userid: Cookies.get('a_user') ?? '',
              planid: Cookies.get('a_planid') ?? ''
            }
          })
          // console.log(check)
          if (check.code === 200) {
            this.isWxCheckLoading = false
            clearInterval(this.checkTimer)
            clearInterval(this.wxMsakTime)
            this.isScan = true
            // 扫码成功 存token
            // this.$store.commit('user/setToken', check.token)
            Cookies.set('TOKEN', check.token, {
              expires: 1
            })
            // 同时获取用户信息
            service({
              method: 'GET',
              url: '/member/me'
            }).then(res => {
              if (res.code === 200) {
                Cookies.set('userinfo', JSON.stringify(res.data), {
                  expires: 1
                })
                location.reload()
              }
            })
            // 删除本地bdvid
            // this.$store.commit('user/removeBdid')
            Cookies.remove('bdVid')
            Cookies.remove('keyword')
            setTimeout(() => {
              this.close()
              window.location.reload()
            }, 600)
          }
        },
        // 点击刷新二维码
        clickRefresh() {
          this.isQrcodeMask = false
          this.getWxQrcode()
          this.checkTimer = setInterval(() => {
            this.getWxCheck()
          }, 1200)
          this.wxMsakTime = setInterval(() => {
            this.wxQrcodeTimer--
            if (this.wxQrcodeTimer === 0) {
              this.isQrcodeMask = true
              clearInterval(this.wxMsakTime)
              this.wxQrcodeTimer = 60
            }
          }, 1000)
        },
        refresh() {
          // 检查订单
          // if (this.isDialog && !this.isQrcodeMask) {
          //   this.checkTimer = setInterval(() => {
          //     this.getWxCheck()
          //   }, 1000)
          // }
          this.isQrcodeMask = false
          this.getWxQrcode()
        },
        // 跳转隐私
        clickYinsi() {
          window.open('/page/helpCenter?type=2')
        },
        // 跳转服务
        clickFuwu() {
          window.open('/page/helpCenter?type=1')
        },
        weixinClick() {
          // this.getWxQrcode()
        },
        weiMouseLeave() {
          this.$nextTick(() => {
            const element = document.querySelector('.item_tab.active')
            element.classList.add('myPseudoElement')
          })
        },
        phoneMouseLeave() {
          this.$nextTick(() => {
            const element = document.querySelector('.item_tab.active')
            element.classList.add('myPseudoElement')
          })
        }

      },
      watch: {
        isdialog(bollean) {
          console.log(bollean)
          // 监听变化 控制滚动条
          // 计算滚动条宽度 (滚动条的宽度不是都为17px的，算一下当前的比较精确)
          const outer = document.createElement('div')
          const inner = document.createElement('div')
          outer.style.overflow = 'scroll'
          document.body.appendChild(outer)
          outer.appendChild(inner)
          const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
          document.body.removeChild(outer)
          if (bollean) {
            document.body.style.overflow = 'hidden'
            document.body.style.paddingRight = scrollbarWidth + 'px'
            this.getWxQrcode()
            // 检查订单
            // if (!this.isQrcodeMask) {
            //   this.checkTimer = setInterval(() => {
            //     this.getWxCheck()
            //   }, 1800)
            // }
          } else {
            document.body.style.overflow = 'visible'
            document.body.style.paddingRight = 0
            clearInterval(this.checkTimer)
            this.wxQrcodeTimer = 60
            clearInterval(this.wxMsakTime)
            // this.isLoginPhone = false
          }
          if (bollean && !this.isQrcodeMask) {
            this.checkTimer = setInterval(() => {
              // this.getWxCheck()
            }, 1500)
            this.wxMsakTime = setInterval(() => {
              this.wxQrcodeTimer--
              if (this.wxQrcodeTimer === 0) {
                this.isQrcodeMask = true
                clearInterval(this.wxMsakTime)
                this.wxQrcodeTimer = 60
              }
            }, 1000)
          } else {
            clearInterval(this.checkTimer)
            this.wxQrcodeTimer = 60
          }
        },
        codeTiemr(time) {
          if (time === 0) {
            clearInterval(this.timer)
            this.codeMsg = '获取验证码'
            this.isDisabled = false
          }
        },
        isLoginPhone: {
          handler(bool) {
            if (!bool && !this.isQrcodeMask && this.isdialog) {
              this.checkTimer = setInterval(() => {
                this.getWxCheck()
              }, 1200)
              // this.wxMsakTime = setInterval(() => {
              //   this.wxQrcodeTimer--
              //   if (this.wxQrcodeTimer === 0) {
              //     this.isQrcodeMask = true
              //     clearInterval(this.wxMsakTime)
              //     this.wxQrcodeTimer = 60
              //   }
              // }, 1000)
            } else {
              clearInterval(this.checkTimer)
              this.wxQrcodeTimer = 60
            }
          },
          immediate: false
        },
        isQrcodeMask: {
          handler(val) {
            if (val) {
              clearInterval(this.checkTimer)
            }
          }
        }
      }
    })

    /**
     * 开通VIP组件
     */
    Vue.component('openvip', {
      template: '#openvip',
      props: {
        isdialog: {
          type: Boolean,
          default: false
        }
      },
      created() {
        this.getMealList()
        this.getCouponList()
      },
      filters: {
        moenyFormat(value) {
          if (!value) return ''

          function formatMoney(number, decimals, dec_point, thousands_sep, roundtag) {
            /*
             * 参数说明：
             * number：要格式化的数字
             * decimals：保留几位小数
             * dec_point：小数点符号
             * thousands_sep：千分位符号
             * roundtag:舍入参数，默认 "ceil" 向上取,"floor"向下取,"round" 四舍五入
             * */
            if (!number) {
              number = 0
            }
            if (!decimals) {
              decimals = 2 // 默认保留2位小数
            }
            if (!dec_point) {
              dec_point = '.'
            }
            if (!thousands_sep) {
              thousands_sep = ','
            }
            if (!roundtag) {
              roundtag = 'round'
            }
            number = (number + '').replace(/[^0-9+-Ee.]/g, '')
            roundtag = roundtag || 'ceil' // "ceil","floor","round"
            const n = !isFinite(+number) ? 0 : +number
            const prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
            const sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep
            const dec = (typeof dec_point === 'undefined') ? '.' : dec_point
            let s = ''
            const toFixedFix = function(n, prec) {
              const k = Math.pow(10, prec)

              return '' + parseFloat(Math[roundtag](parseFloat((n * k).toFixed(prec * 2))).toFixed(prec * 2)) / k
            }
            s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
            const re = /(-?\d+)(\d{3})/
            while (re.test(s[0])) {
              s[0] = s[0].replace(re, '$1' + sep + '$2')
            }

            if ((s[1] || '').length < prec) {
              s[1] = s[1] || ''
              s[1] += new Array(prec - s[1].length + 1).join('0')
            }
            return s.join(dec)
          }
          return formatMoney(value)
        }

      },
      data() {
        return {
          active: 0,
          isSelectShow: false,
          discountList: ['不使用优惠券', '满69减11元', '满39减3元'],
          discountInfo: {
            title: '不使用优惠券',
            id: ''
          },
          discountsMoney: 300, // 优惠金额
          money: 69,
          mealList: [],
          radio: 'weixin',
          moment,
          couponList: [],
          selectDefault: [{
            title: '不使用优惠券',
            id: ''
          }],
          // userInfo: {},
          // isDialog: false
        }
      },
      computed: {
        // ...mapGetters(['userInfo']),
        userInfo() {
          return Cookies.get('userinfo') ? JSON.parse(Cookies.get('userinfo')) : null
        },
        // 未使用优惠券列表列表
        unusedList: {
          get() {
            const newList = [...this.selectDefault]
            this.couponList.forEach(item => {
              if (item.status === 1 && item.is_over !== 1) {
                newList.push(item)
              }
            })
            return newList
          },
          set() {
            this.selectDefault = []
          }
        }
      },
      methods: {
        // 关闭弹框
        close() {
          this.$nextTick(() => {
            // 定义动画
            // document.styleSheets[0].insertRule(
            //   `@keyframes dialogclose {
            //   0% { transform: translate(-50%,-50%) scale(1);opacity: 1;}
            //   100% { transform: translate(-50%,-50%) scale(0);opacity: 0;} }`,
            //   0
            // )
            document.querySelector('.openVip_dialog').style.animation = 'dialogclose .3s  forwards'
            setTimeout(() => {
              this.$emit('close', false)
              // this.isDialog = false
            }, 300)
          })
        },
        mouseout() {
          setTimeout(() => {
            this.isSelectShow = false
          }, 0)
        },
        async getMealList() {
          const {
            data
          } = await service({
            method: 'GET',
            url: '/order_type/list',
            params: {
              type: 1
            },
            headers: {
              signature,
              timestamp
            }
          })
          // console.log(data)
          this.mealList = data
        },
        // 点击支付
        async payClick(type) {
          this.radio = type
          const id = this.mealList[this.active].id
          const con_id = location.href.split('contractdetail/')[1].replace('.html', '')
          if (this.radio === 'weixin' && location.href.includes('contractdetail')) {
            // 微信支付 是详情页
            const res = await service({
              method: 'POST',
              url: '/wxpay/pc_pay',
              data: {
                payid: id,
                contract_id: con_id,
                coupon_id: this.discountInfo.id,
                keywordid: this.userInfo.keywordid ?? '',
                unitid: this.userInfo.unitid ?? '',
                userid: this.userInfo.userid ?? '',
                planid: this.userInfo.planid ?? ''
              }
            })
            if (res.code !== 200) return this.$message.error('接口出错')
            // window.open(`/pay?order=${res.order_no}`)
            window.location.href = `/page/pay?order=` + res.order_no
            this.close()
          } else if (this.radio === 'weixin' && this.$route.name !== 'ContractDetail') {
            // 微信支付 不是详情页
            const res = await service({
              method: 'POST',
              url: '/wxpay/pc_pay',
              data: {
                payid: id,
                coupon_id: this.discountInfo.id,
                keywordid: this.userInfo.keywordid ?? '',
                unitid: this.userInfo.unitid ?? '',
                userid: this.userInfo.userid ?? '',
                planid: this.userInfo.planid ?? ''
              }
            })
            if (res.code !== 200) return this.$message.error('接口出错')
            // window.open(`/pay?order=${res.order_no}`)
            window.location.href = `/page/pay?order=` + res.order_no
            this.close()
          } else if (this.radio === 'zfb' && this.$route.name !== 'ContractDetail') {
            // console.log(this.$route)
            // 支付宝支付
            console.log(this.$route.fullPath);
            const res = await service({
              method: 'POST',
              url: '/alipay/pc_pay',
              data: {
                payid: id,
                return_url: this.$route.fullPath,
                coupon_id: this.discountInfo.id,
                keywordid: this.userInfo.keywordid ?? '',
                unitid: this.userInfo.unitid ?? '',
                userid: this.userInfo.userid ?? '',
                planid: this.userInfo.planid ?? ''
              }
            })
            if (res.code !== 200) return this.$message.error('接口错误请重试')
            // 跳转支付
            // window.open(res.url)
            window.location.href = res.url
          } else if (this.radio === 'zfb' && location.href.includes('contractdetail')) {
            // 支付宝支付
            service({
              method: 'POST',
              url: '/alipay/pc_pay',
              data: {
                // return_url: this.$route.fullPath,
                return_url: location.href.replace(location.host, '').replace('https://', ''),
                payid: id,
                contract_id: con_id,
                coupon_id: this.discountInfo.id,
                keywordid: this.userInfo.keywordid ?? '',
                unitid: this.userInfo.unitid ?? '',
                userid: this.userInfo.userid ?? '',
                planid: this.userInfo.planid ?? ''
              }
            }).then((res) => {
              // window.open(res.url)
              // console.log(this.$route.fullPath)
              window.location.href = res.url
            }).catch(() => {
              this.$message.error('接口出错')
            })
          }
        },
        // 获取优惠券列表
        async getCouponList() {
          try {
            const res = await service({
              method: 'GET',
              url: '/order/get_coupon_list'
            })
            if (res.code === 200) {
              // console.log(res)
              this.couponList = res.data
            }
          } catch (err) {
            // this.$message.error(err.message)
            console.log(err)
          }
        },
        // 点击下拉框的下拉项
        selestItemClick(item, index) {
          if (this.mealList[this.active].price >= item.fill_price || index === 0) {
            this.discountInfo = item
          } else {
            return false
          }
        },
        // 跳转服务协议
        introClick() {
          window.open('/page/helpCenter/?type=1')
        }

      },
      watch: {
        isdialog(bollean) {
          // 监听变化 控制滚动条
          // 计算滚动条宽度 (滚动条的宽度不是都为17px的，算一下当前的比较精确)
          const outer = document.createElement('div')
          const inner = document.createElement('div')
          outer.style.overflow = 'scroll'
          document.body.appendChild(outer)
          outer.appendChild(inner)
          const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
          document.body.removeChild(outer)
          if (bollean) {
            document.body.style.overflow = 'hidden'
            document.body.style.paddingRight = scrollbarWidth + 'px'
          } else {
            document.body.style.overflow = 'visible'
            document.body.style.paddingRight = 0
          }
        },
        active: {
          handler(nval) {
            // 此时还没请求过来数据
            if (this.mealList.length <= 0) {
              setTimeout(() => {
                this.unusedList.forEach(item => {
                  if (item.fill_price === this.mealList[nval].price) {
                    this.discountInfo = item
                  }
                })
              }, 800)
            } else {
              // 已有数据
              if (this.unusedList.length > 2) {
                this.unusedList.forEach(item => {
                  if (item.fill_price <= this.mealList[nval].price) {
                    this.discountInfo = item
                  }
                })
              } else {
                this.unusedList.forEach(item => {
                  if (item.fill_price <= this.mealList[nval].price) {
                    this.discountInfo = item
                  } else {
                    this.discountInfo = {
                      title: '不使用优惠券',
                      id: ''
                    }
                  }
                })
              }
            }
          },
          immediate: true
        }
      }
    })



    /**
     * 单篇购买组件
     */
    Vue.component('singledialog', {
      template: '#singledialog',
      props: {
        isdialog: {
          type: Boolean,
          default: false
        },
        data: {
          type: Object
        }
      },
      data() {
        return {
          second: 59,
          millisecond: 10,
          timer: null,
          timer2: null,
          typeInfo: {}
        }
      },
      computed: {
        userInfo() {
          return Cookies.get('userinfo') ? JSON.parse(Cookies.get('userinfo')) : null
        },
      },
      filters: {
        moenyFormat(value) {
          if (!value) return ''

          function formatMoney(number, decimals, dec_point, thousands_sep, roundtag) {
            /*
             * 参数说明：
             * number：要格式化的数字
             * decimals：保留几位小数
             * dec_point：小数点符号
             * thousands_sep：千分位符号
             * roundtag:舍入参数，默认 "ceil" 向上取,"floor"向下取,"round" 四舍五入
             * */
            if (!number) {
              number = 0
            }
            if (!decimals) {
              decimals = 2 // 默认保留2位小数
            }
            if (!dec_point) {
              dec_point = '.'
            }
            if (!thousands_sep) {
              thousands_sep = ','
            }
            if (!roundtag) {
              roundtag = 'round'
            }
            number = (number + '').replace(/[^0-9+-Ee.]/g, '')
            roundtag = roundtag || 'ceil' // "ceil","floor","round"
            const n = !isFinite(+number) ? 0 : +number
            const prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
            const sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep
            const dec = (typeof dec_point === 'undefined') ? '.' : dec_point
            let s = ''
            const toFixedFix = function(n, prec) {
              const k = Math.pow(10, prec)

              return '' + parseFloat(Math[roundtag](parseFloat((n * k).toFixed(prec * 2))).toFixed(prec * 2)) / k
            }
            s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
            const re = /(-?\d+)(\d{3})/
            while (re.test(s[0])) {
              s[0] = s[0].replace(re, '$1' + sep + '$2')
            }

            if ((s[1] || '').length < prec) {
              s[1] = s[1] || ''
              s[1] += new Array(prec - s[1].length + 1).join('0')
            }
            return s.join(dec)
          }
          return formatMoney(value)
        }

      },
      methods: {
        // 获取单篇套餐列表
        async getSinglePrice() {
          const {
            data
          } = await service({
            method: 'GET',
            url: '/order_type/list',
            params: {
              type: 4
            },
            headers: {
              signature,
              timestamp
            }
          })
          this.typeInfo = data[0]
        },
        // 关闭弹框
        close() {
          this.$nextTick(() => {
            document.querySelector('.single_dialog').style.animation = 'dialogclose .3s  forwards'
            setTimeout(() => {
              this.$emit('close', false)
              // window.location.reload()
            }, 300)
          })
        },
        send() {
          // console.log('ok')
          this.$emit('close', false)
        },
        // 倒计时
        countDown() {
          this.timer = setInterval(() => {
            this.second--
            if (this.second === 0) {
              this.second = '00'
              clearInterval(this.timer)
            }
          }, 1000)

          // const funs = () => {
          //   if (this.second <= 0) {
          //     return false
          //   } else {
          //     setTimeout(() => {
          //       this.second--
          //       funs()
          //     }, 1000)
          //   }
          // }
          // funs()

          this.timer2 = setInterval(() => {
            this.millisecond = '0' + `${this.millisecond - 1}`
            if (this.millisecond === '00') {
              this.millisecond = 10
            }
            if (this.second === '00') {
              this.millisecond = '00'
              clearInterval(this.timer2)
            }
          }, 100)
        },
        // 支付宝支付
        async zfbPay() {
          const con_id = location.href.split('contractdetail/')[1].replace('.html', '')
          const res = await service({
            method: 'POST',
            url: '/alipay/pc_pay',
            data: {
              payid: this.typeInfo.id,
              contract_id: con_id,
              return_url: '/',

              keyword: Cookies.get('keyword') || '',
              bd_vid: Cookies.get('bdVid') || '',
              keywordid: Cookies.get('a_keywordid') ?? '',
              unitid: Cookies.get('a_unitid') ?? '',
              userid: Cookies.get('a_user') ?? '',
              planid: Cookies.get('a_planid') ?? ''
            }
          })
          // window.open(res.url)
          window.location.href = res.url
        },
        // 微信支付
        async weixinPay() {
          const con_id = location.href.split('contractdetail/')[1].replace('.html', '')
          const res = await service({
            method: 'POST',
            url: '/wxpay/pc_pay',
            data: {
              payid: this.typeInfo.id,
              contract_id: con_id,

              keyword: Cookies.get('keyword') || '',
              bd_vid: Cookies.get('bdVid') || '',
              keywordid: Cookies.get('a_keywordid') ?? '',
              unitid: Cookies.get('a_unitid') ?? '',
              userid: Cookies.get('a_user') ?? '',
              planid: Cookies.get('a_planid') ?? ''
            }
          })
          // this.$router.replace({
          //   name: 'pay',
          //   query: {
          //     order: res.order_no
          //   }
          // })
          window.location.href = '/page/pay?order=' + res.order_no
        }
      },
      watch: {
        isdialog(bollean) {
          // 监听变化 控制滚动条
          // 计算滚动条宽度 (滚动条的宽度不是都为17px的，算一下当前的比较精确)
          const outer = document.createElement('div')
          const inner = document.createElement('div')
          outer.style.overflow = 'scroll'
          document.body.appendChild(outer)
          outer.appendChild(inner)
          const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
          document.body.removeChild(outer)
          if (bollean) {
            this.getSinglePrice()

            this.countDown()
            document.body.style.overflow = 'hidden'
            document.body.style.paddingRight = scrollbarWidth + 'px'
          } else {
            clearInterval(this.timer)
            clearInterval(this.timer2)
            this.second = 59
            this.millisecond = 10
            document.body.style.overflow = 'visible'
            document.body.style.paddingRight = 0
          }
        }
      }

    })


    /**
     * 优惠券组件
     */
    Vue.component('coupondialog', {
      template: '#coupondialog',
      props: {
        isdialog: {
          type: Boolean,
          default: false
        },
        data: {
          type: Array
        }
      },
      data() {
        return {
          image: ''
        }
      },
      computed: {
        userInfo() {
          return Cookies.get('userinfo') ? JSON.parse(Cookies.get('userinfo')) : null
        },
      },
      filters: {
        moenyFormat(value) {
          if (!value) return ''
          return formatMoney(value)
        }

      },
      created() {
        if (this.userInfo) {
          this.getCouponImage()
        }
      },
      methods: {
        // 关闭弹框
        close() {
          this.$nextTick(() => {
            // 定义动画
            // document.styleSheets[0].insertRule(
            //   `@keyframes dialogclose {
            //   0% { transform: translate(-50%,-50%) scale(1);opacity: 1;}
            //   100% { transform: translate(-50%,-50%) scale(0);opacity: 0;} }`,
            //   0
            // )
            document.querySelector('.coupon_dialog').style.animation = 'dialogclose .3s  forwards'
            setTimeout(() => {
              this.$emit('close', false)
              window.location.reload()
            }, 300)
          })
        },
        send() {
          // console.log('ok')
          this.$emit('close', false)
          setTimeout(() => {
            this.$router.push({
              path: 'ucenter'
            }, () => {}, () => {})
          }, 300)
        },
        // 获取优惠券图片
        async getCouponImage() {
          const res = await service({
            method: 'GET',
            url: '/order/get_coupon_img',
            params: {
              type: 2
            }
          })
          this.image = res.data.image
        }
      },
      watch: {
        isdialog(bollean) {
          // 监听变化 控制滚动条
          // 计算滚动条宽度 (滚动条的宽度不是都为17px的，算一下当前的比较精确)
          const outer = document.createElement('div')
          const inner = document.createElement('div')
          outer.style.overflow = 'scroll'
          document.body.appendChild(outer)
          outer.appendChild(inner)
          const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
          document.body.removeChild(outer)
          if (bollean) {
            document.body.style.overflow = 'hidden'
            document.body.style.paddingRight = scrollbarWidth + 'px'
          } else {
            document.body.style.overflow = 'visible'
            document.body.style.paddingRight = 0
          }
        }
      }
    })

    /**
     * 路由拦截器
     */
    router.afterEach(route => {
      console.log(route);
      // 获取nomal信息
      service({
        method: 'GET',
        url: '/intro/get_normal',
        headers: {
          signature,
          timestamp
        }
      }).then(res => {
        res.code === 200 ? Cookies.set('nomal', JSON.stringify(res.data)) : false
      })
      // 有token请求用户信息和下载次数
      if (Cookies.get('TOKEN')) {
        service({
          method: 'GET',
          url: '/member/me'
        }).then(res => {
          if (res.code === 200) {
            Cookies.set('userinfo', JSON.stringify(res.data), {
              expires: 1
            })
          }
        })
        // 下载次数
        service({
          method: 'GET',
          url: '/member/get_day_num'
        }).then(obj => {
          obj.code === 200 ? Cookies.set('downloadNum', obj.count) : false
        })
      }

    })
    /**
     * 根组件
     */
    const app = new Vue({
      el: "#app",
      router: router,
      data() {
        return {
          test: 'okok',
          loginshow: false,
          isCouponDialog: false,
          couponData: ''
        }
      },
      computed: {
        userInfo() {
          return Cookies.get('userinfo') ? JSON.parse(Cookies.get('userinfo')) : null
        },
      },
      created() {

        /**
         * 封装本地存储模块
         */

        // 存数据
        const setItem = (key, val) => {
          if (typeof val === 'object') {
            val = JSON.stringify(val)
          }
          window.localStorage.setItem(key, val)
        }
        // 获取数据
        const getItem = key => {
          const data = window.localStorage.getItem(key)
          try {
            return JSON.parse(data)
          } catch (err) {
            return data
          }
        }
        // 删除数据
        const removeItem = key => {
          window.localStorage.removeItem(key)
        }
        // console.log(this.$route)
        // this.sendCoupon()
        if (getItem('singleWord')) {
          this.$confirm('恭喜您购买成功单篇文档，请点击下载按钮下载文档！', {
            confirmButtonText: '下载'
          }).then(() => {
            const a = document.createElement('a')
            a.href = getItem('singleWord').path.replace('http://', 'https://') + '?response-content-type=application/octet-stream'
            a.click()
            a.remove()
          }).finally(() => {
            removeItem('singleWord')
          })
        }
      },
      methods: {
        clicklogin(r) {
          console.log('45');
          this.loginshow = true
        },
        sendCoupon() {
          if (this.userInfo) {
            service({
                method: 'GET',
                url: '/member/check_order'
              })
              .then((res) => {
                // console.log(res)
                if (res.count === 0) return false
                else if (res.count >= 1) {
                  // 如果有未支付的合同
                  // TODO 领取优惠券
                  service({
                      method: 'GET',
                      url: '/order/send_coupon'
                    })
                    .then(res => {
                      console.log(res)
                      if (res.code === 200) {
                        // console.log('成功领取优惠券')
                        this.couponData = res.data
                        this.isCouponDialog = true
                      } else if (res.code === 1001) {}
                    })
                }
              })
          }
        }
      },
      watch: {
        $route: {
          handler(route) {
            console.log(route)
            if (route.name !== 'pay') {
              // window.location.reload()
              this.sendCoupon()
            }

            function envjudge() {
              const isMobile = window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) // 是否手机端
              const isWx = /micromessenger/i.test(navigator.userAgent) // 是否微信
              const isComWx = /wxwork/i.test(navigator.userAgent) // 是否企业微信

              if (isComWx && isMobile) { // 手机端企业微信
                return 'com-wx-mobile'
              } else if (isComWx && !isMobile) { // PC端企业微信
                return 'com-wx-pc'
              } else if (isWx && isMobile) { // 手机端微信
                return 'wx-mobile'
              } else if (isWx && !isMobile) { // PC端微信
                return 'wx-pc'
              } else if (isMobile) {
                return 'mobile'
              } else {
                return 'other'
              }
            }

            // if (envjudge() === 'mobile' || envjudge() === 'com-wx-mobile' || envjudge() === 'wx-mobile') {
            //   if (route.name === 'helpCenter') {
            //     // 帮助中心不跳转
            //     return false
            //   } else {
            //     // 跳转到移动
            //     window.location.href = 'http://m.souhetong.com/wap'
            //   }
            //   // window.location.href = 'http://192.168.1.6:8080/wap/'
            // }

            if (envjudge() === 'mobile' || envjudge() === 'com-wx-mobile' || envjudge() === 'wx-mobile') {
              if (route.name === 'helpCenter') {
                // 帮助中心不跳转
                // alert(0)
                // return false
              } else {
                // 跳转到移动
                // eslint-disable-next-line no-lonely-if
                window.location.href = 'https://m.wenhetong.com' + route.fullPath
              }
            }
          },
          immediate: true
        }
      }

    })
  </script>
</body>
<script>
  // 顶部轮播图
  var mySwiper = new Swiper('.swiper-container', {
    // direction: 'vertical',
    loop: true,
    // autoplay: 2000,

    // 如果需要分页器
    pagination: '.swiper-pagination',

    // 如果需要前进后退按钮
    // nextButton: '.icon-xiangyoujiantou',
    // prevButton: '.icon-xiangzuojiantou',
    paginationClickable: true


    // 如果需要滚动条
    // scrollbar: '.swiper-scrollbar',
  })
  // 中部分类轮播
  var mySwiper2 = new Swiper('.swiper-container2', {
    // direction: 'vertical',
    // loop: true,
    autoplay: false,
    slidesPerView: 4,
    // centeredSlides: true,
    // freeMode: true,

    // // 如果需要分页器
    // pagination: '.swiper-pagination',

    // // 如果需要前进后退按钮
    // nextButton: '.icon-xiangyoujiantou',
    // prevButton: '.icon-xiangzuojiantou',
    // paginationClickable: true


    // 如果需要滚动条
    // scrollbar: '.swiper-scrollbar',
  })
</script>

</html>